{% stylesheet %}
.block_facebook .block_title {
  margin-bottom: 0;
}

.block_facebook .block_facebook_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.block_facebook .block_facebook_left {
  width: calc(100% - 500px);
  padding: 0 100px 0 0;
  box-sizing: border-box;
}

.block_facebook .block_facebook_right {
  width: 500px;
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  overflow: hidden;
  padding: 15px;
  box-sizing: border-box;
}

.block_facebook .block_facebook_content_style {
  flex-direction: row-reverse;
}

.block_facebook .block_facebook_content_style .block_facebook_left {
  padding: 0 0 0 100px;
}

@media (max-width: 768px) {
  .block_facebook .block_facebook_content_style,
  .block_facebook .block_facebook_content {
    flex-direction: column;
  }
  .block_facebook .block_facebook_content_style .block_facebook_left,
  .block_facebook .block_facebook_left {
    padding: 0;
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
  }
}

@media (max-width: 768px) {
  .block_facebook .block_facebook_right {
    width: 480px;
  }
}

@media (max-width: 767px) {
  .block_facebook .block_facebook_right {
    width: 100%;
  }
}

{% endstylesheet %}

<div class="block_facebook">
    <div class="container_wrapper">
        <div class="block_facebook_content {% if section.settings.position == '2' %}block_facebook_content_style{% endif %}">
            <div class="block_facebook_left">
							{% include 'block_title', title:section.settings.title , detail:section.settings.detail %}

            </div>
           {% assign name = section.settings.tab | join: "," %}

            <div class="block_facebook_right">
                <iframe id="facebook_iframe" style="width:100%;border:none;overflow:hidden;height: {{ section.settings.height }}px;" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function(){
    const width = $('.block_facebook_right').width();
    const facebook_url = "https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2F{{ section.settings.account }}%2F&tabs={{ name | escape }}&width="+width+"&height={{ section.settings.height }}&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
    $('#facebook_iframe').attr('src',facebook_url)
})
</script>

{% schema %}
{
	"tag": "section",
	"class": "block_facebook",
	"is_global": false,
	"name": {
		"zh_CN": "Facebook",
		"en_US": "Facebook"
	},
	"max_blocks": "",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input",
			"id": "title",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"placeholder": {
				"zh_CN": "请输入标题",
				"en_US": "Please enter title"
			},
			"default": "Facebook"
		},
		{
			"type": "card_text_editor",
			"id": "detail",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"placeholder": {
				"zh_CN": "请输入描述",
				"en_US": "Please enter a description"
			},
			"default": "With the public homepage plugin, you can easily embed and promote any public Facebook homepage on your website. Just like on Facebook, your visitors can like and share the homepage on the site."
		},
		{
			"type": "card_input",
			"id": "account",
			"label": {
				"zh_CN": "账号",
				"en_US": "Account number"
			},
			"placeholder": {
				"zh_CN": "请输入账号,如XXXXX",
				"en_US": "Please enter account, such as XXXXX"
			},
			"info": {
				"zh_CN": "Facebook 公共主页账号，例如: https://www.facebook.com/XXXXX",
				"en_US": "Facebook public homepage account, such as: https://www.facebook.com/XXXXX,"
			}
		},
		{
			"type": "card_checkbox",
			"id": "tab",
			"label": {
				"zh_CN": "选项卡",
				"en_US": "Tab"
			},
			"option": [
				{
					"label": {
						"zh_CN": "时间线",
						"en_US": "Time line"
					},
					"value": "timeline"
				},
				{
					"label": {
						"zh_CN": "活动",
						"en_US": "Activity"
					},
					"value": "events"
				},
				{
					"label": {
						"zh_CN": "消息",
						"en_US": "News"
					},
					"value": "messages"
				}
			],
			"default": [
				"timeline",
				"events",
				"messages"
			]
		},
		{
			"type": "card_input_number",
			"label": {
				"zh_CN": "高度",
				"en_US": "Height"
			},
			"default": "500",
			"id": "height"
		},
		{
			"type": "card_select",
			"id": "position",
			"label": {
				"zh_CN": "描述位置",
				"en_US": "To describe location"
			},
			"option": [
				{
					"label": {
						"zh_CN": "居左",
						"en_US": "To the left"
					},
					"value": "1"
				},
				{
					"label": {
						"zh_CN": "居右",
						"en_US": "To the right"
					},
					"value": "2"
				}
			],
			"default": "2"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"title": "Facebook",
			"detail": "With the public homepage plugin, you can easily embed and promote any public Facebook homepage on your website. Just like on Facebook, your visitors can like and share the homepage on the site.",
			"account": "",
			"tab": [
				"timeline",
				"events",
				"messages"
			],
			"height": "500",
			"position": "2"
		},
		"blocks": []
	},
	"icon": "icon-facebook"
}
{% endschema %}